<template>
  <div>
    <h2>短信日志页面</h2>
    <!-- 这里添加短信日志的具体内容 -->
    <div class="xinxi">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="订单类型">
          <el-select v-model="form.region" placeholder="全部" style="width: 150px" clearable>
          </el-select>
        </el-form-item>
        <el-form-item label="短信类型">
          <el-radio-group v-model="form.note">
            <el-radio label="1">文本</el-radio>
            <el-radio label="2">语音</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否回填">
          <el-radio-group v-model="form.backfill">
            <el-radio label="1">已回填</el-radio>
            <el-radio label="2">未回填</el-radio>
            <el-radio label="3">无需</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" @click="findAll()" style="margin-left: 170px">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <br><br>
        <span>订单时间</span>
        <el-date-picker
            v-model="form.date1"
            type="datetime"
            placeholder="选择日期"
            style="width: 200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable>
        </el-date-picker>
        <span>至</span>
        <el-date-picker
            v-model="form.date2"
            type="datetime"
            placeholder="选择日期"
            style="width: 200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable>
        </el-date-picker>

        <el-form-item label="" style="margin-left: 90px">
          <el-input v-model="form.orderCancel" style="width: 200px" placeholder="请输入手机号查询" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="exportExcel()">导出</el-button>
      </el-form>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="backstageUser.userPhone"
          label="用户手机号">
      </el-table-column>
      <el-table-column
          prop="userId"
          label="用户ID">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名称">
      </el-table-column>
      <el-table-column
          prop="backfill"
          label="是否回填">
        <template slot-scope="scope">
          {{ scope.row.backfill == 1 ? "已回填" : scope.row.backfill == 2 ? "未回填" : "无需" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="note"
          label="短信类型">
        <template slot-scope="scope">
          {{ scope.row.note == 1 ? "文本" : "语音" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="giveOutdate"
          label="短信发出时间">
      </el-table-column>
      <el-table-column
          prop="noteEffect"
          label="短信作用">
        <template slot-scope="scope">
          {{ scope.row.noteEffect == 1 ? "注册" : scope.row.noteEffect == 2 ? "行程分享" :scope.row.noteEffect == 3 ? "支付":"广告推送" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="noteCost"
          label="短信费用">
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import * as XLSX from 'xlsx';
export default {
  name: "RizhiView",
  data() {
    return {
      form: {},
      tableData: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
    }
  },
  methods:{
    handleCurrentChange(val) {
      this.pageNum = val
      this.findAll();
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findAll();
    },
    findAll() {
      axios.post(`http://localhost:9999/api-function/dailyRecord/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    exportExcel() {
      //导出
      // 创建一个工作簿（workbook）
      const ws = XLSX.utils.json_to_sheet(this.tableData); // 将 JSON 数据转换为工作表
      const wb = XLSX.utils.book_new(); // 新建工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿中

      // 导出 Excel 文件
      XLSX.writeFile(wb, '短信日志.xlsx');
    },
    resetForm() {
      this.form = {}
      this.findAll();
    },
  },
  created() {
      this.findAll();
  }
}
</script>

<style scoped>
</style>
